<template>
  <div>
          <div class="goodsTop">
      <div>
        <Button type="success">新增商品</Button>
        <Button type="error" style="margin: 0 10px">回收站</Button>
        <Button type="info">导出税率编码模板</Button>
      </div>
      <div>
        <Select
        v-if="select.classification"
          v-model="form.classification"
          style="width: 110px;margin-right:10px"
          placeholder="请选择分类"
        >
          <Option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select
        v-if="select.State"
          v-model="form.allState"
          style="width: 110px; margin-right: 10px"
          placeholder="请选择状态"
        >
          <Option
            v-for="item in stateList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select
        v-if="select.grouping"
          v-model="form.grouping"
          style="width: 110px; margin: 0 10px"
          placeholder="请选择分组"
        >
          <Option
            v-for="item in groupingList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Input v-model="form.search" placeholder="请输入搜索内容" style="width: 160px; margin-right: 5px" />
        <Button icon="ios-search" type="primary">搜索</Button>
      </div>
    </div>
    <div>
      <Table border :columns="columns12" :data="data6">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ index }" slot="action">
          <Button
            type="info"
            size="small"
            style="margin-right: 5px"
            @click="edit(index)"
            >编辑</Button
          >
          <Button
            type="error"
            size="small"
            style="margin-right: 5px"
            @click="remove(index)"
            >删除</Button
          >
          <Button type="success" size="small" @click="save(index)"
            >新增下级</Button
          >
        </template>
      </Table>
    </div>
    <div class="bottomPage">
      <Page
        :total="pagination.total"
        :page-size="pagination.pageSize"
        :page-size-opts="pagination.pageSizeOpts"
        @on-change="onChange"
        @on-page-size-change="onPageSizeChange"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>

<script>
export default {
    props:{
        select:{
        classification: false,
        State: false,
        grouping:false, 
        },
    },
  data() {
    return {
      form: {
        classification: "",
        allState: "",
        grouping:"",
        search: "",
      },
      cityList: [
        {
          value: "全部分类",
          label: "全部分类",
        },
        {
          value: "测试组A",
          label: "测试组A",
        },
        {
          value: "测试组B",
          label: "测试组B",
        },
      ],
      stateList: [
        {
          value: "全部状态",
          label: "全部状态",
        },
        {
          value: "出售中",
          label: "出售中（已上架）",
        },
        {
          value: "未出售",
          label: "未出售（已下架）",
        },
      ],
      groupingList: [
        {
          value: "全部分组",
          label: "全部分组",
        },
        {
          value: "测试组A",
          label: "测试组A",
        },
        {
          value: "测试组B",
          label: "测试组B",
        },
      ],
      columns12: [
        {
          title: "图片",
          slot: "name",
        },
        {
          title: "名称",
          key: "age",
        },
        {
          title: "价格",
          key: "address",
        },
        {
          title: "库存",
          key: "address",
        },
        {
          title: "可用库存",
          key: "address",
        },
        {
          title: "创建时间",
          key: "address",
        },
        {
          title: "状态",
          key: "address",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 300,
        },
      ],
      data6: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
        },
      ],
      pagination: {
        total: 100,
        pageNum: 1,
        pageSize: 15,
        pageSizeOpts: [15, 20, 50],
      },
    };
  },
  methods: {
    initData() {
      console.log(初始化内容);
    },
    edit(index) {
      console.log(index);
    },
    remove(index) {
      console.log(index);
    },
    save(index) {
      console.log(index);
    },
    onChange(size) {
      this.pagination.pageNum = size;
      this.initData();
    },
    onPageSizeChange(size) {
      this.pagination.pageSize = size;
      this.initData();
    },
  },
};
</script>

<style lang="scss">
.goodsTop{
    display: flex;
    justify-content: space-between;
    margin: 20px;
}
.bottomPage {
  margin-top: 30px;
  text-align: center;
}
</style>